~{define "components/jielong_add_form"}~
<!-- 定义模板内容 -->
<style>
    #app .container .theme {
        font-size: 22px;
        font-weight: 600;
    }

    #app .container .theme .el-input__inner {
        padding: 30px 15px;
    }

    #app .el-textarea .el-input__count {
        right: 24px;
    }
</style>
<!-- 加载需要的组件 -->
~{template "components/jielong_user_list_demo" .}~
<template id="template-jielong-add-form">
    <el-form ref="form" :model="form" label-width="0px">

        <el-form-item label="">
            <el-input type="text" v-model="form.theme" placeholder="接龙主题..." class="theme" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-input type="textarea" v-model="form.content" placeholder="[ 可选 ] 接龙说明..." maxlength="1024"
                show-word-limit :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-input v-model="form.fill" placeholder="[ 可选 ] 自动填充到用户名后面的内容..." maxlength="20"></el-input>
        </el-form-item>
        <!-- 传递 props 给组件 -->
        <jielong-user-list-demo :auto-content="form.fill"></jielong-user-list-demo>
        <div class="center" style="margin-top: 100px;">
            <el-button type="primary" class="full-width" @click="onSubmit" :loading="waiting">完成创建</el-button>
            <!-- <el-button>取消</el-button> -->
        </div>

    </el-form>
</template>
<script>
    // 定义组件
    Vue.component('jielong-add-form', {
        props: ['jielongItem'],
        data: function () {
            return {
                waiting: false,
                form: {
                    theme: '',
                    content: '',
                    fill: ''
                }
            };
        },
        template: '#template-jielong-add-form',
        methods: {
            onSubmit() {
                console.log('submit!', this.form);
                if (!this.form.theme) {
                    this.$message.error('请填写主题');
                    return;
                }
                // if (!this.form.content) {
                //     this.$message.error('请填写说明');
                //     return;
                // }
                this.waiting = true;
                fetchPost('/jielong/api/ListAdd', this.form).then(res => {
                    this.$emit('on-success', res.data);
                }).finally(() => {
                    this.waiting = false;
                });
            }
        }
    })
</script>
~{end}~